<template>
    <div>
        <van-nav-bar title="修改昵称" left-arrow class="vant_head" @click-left="onClickLeft" @click-right="onClikRight"
            right-text="完成" />
        <div style="position: relative;background-color: #f1f1f1;width: 100%;height: 62.5rem;">
            <span style="position: absolute;top: 1rem;left: 1rem;color: #919191;">6个汉字或12个字母以内</span>
            <!-- <span style="position: absolute;top: 4rem;">{{ userInfo.nickname }}</span> -->
            <input maxlength="12" :placeholder="userInfo.nickname" v-model="validInputValue" type="text"
                style="width: 100%;height: 3.375rem;position: absolute;top: 3rem;border: none;background-color: #fff;">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const userInfo = ref<any>(JSON.parse(localStorage.getItem('userInfo')));
console.log(userInfo.value);
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const inputValue = ref('');
const validInputValue = ref('');

var onClickLeft = () => {
    console.log(1111);
    router.push({ path: '/pic' })
}

const onClikRight = () => {
    console.log(222);
    const regex = /^[\u4e00-\u9fffA-Za-z0-9]{6,12}$/;
        if (regex.test(validInputValue.value)) {
            console.log('成功');
            userInfo.value.nickname = validInputValue.value;
            localStorage.setItem('userInfo',JSON.stringify(userInfo.value));
            validInputValue.value = '';
        }else{
            console.log(validInputValue.value);
            console.log('失败');
        }
    if (regex.test(validInputValue.value)) {
        console.log('====================================');
        console.log('过了');
        console.log('====================================');
        userInfo.value.nickname = validInputValue.value;
        localStorage.setItem('userInfo', JSON.stringify(userInfo.value));
        validInputValue.value = '';
    } else {
        console.log(validInputValue.value);
        console.log('失败');
    }
}
</script>

<style lang="scss" scoped>
:deep(.van-icon) {
    color: #63c38a !important
}

:deep(.van-nav-bar__text) {
    color: #63c38a !important
}

:deep(.van-nav-bar) {
    border-bottom: 1px solid #eee;
}
</style>